<script setup lang="ts">
/**
 * 数据源切换组件（参照 colorbar 的轻量外观）
 * - 通过 v-model 接收/更新当前数据源 value
 * - 通过 props.options 传入可选数据源列表（默认占位）
 * - 触发 change 事件，方便父组件响应切换
 */
import {computed, toRefs, watch} from 'vue'
import {DataSource, useWeatherStore} from '@/store';

const props = withDefaults(defineProps<{
  disabled?: boolean
}>(), {
  disabled: false,
})

// 让选中值与 store 的类型保持一致（避免 '1' 与 1 严格比较不相等）
const weatherStore = useWeatherStore();

const dataSourceOptions = [{value: DataSource.cma, label: '中国气象局'},
  {value: DataSource.ec, label: '欧洲气象中心'},
  {value: DataSource.plan, label: '海二代'},]

const onOptionClick = (opt: { value: string | number; label: string }) => {
  if (props.disabled) return
  if (weatherStore.dataSource == opt.value) return
  // 如果 store 有 setter 方法请改为 weatherStore.setDataSource(opt.value as any)
  weatherStore.dataSource = opt.value as any
}

// 对外 change 事件（除 v-model 外，方便父组件监听）
const emit = defineEmits<{ (e: 'change', val: string | number): void }>()

watch(() => weatherStore.dataSource, (val) => {

  emit('change', val as any)
})


</script>

<template>
  <div class="ds-switch" v-show="weatherStore.activeWeather" @click.stop @mousedown.stop @dblclick.stop.prevent
       @touchstart.stop @touchend.stop>
    <div
        class="source-tab"
        role="tablist"
        tabindex="0"
        @click.stop
        @mousedown.stop
        @dblclick.stop.prevent
        @touchstart.stop
        @touchend.stop
    >
      <span
          v-for="opt in dataSourceOptions"
          :key="`${opt.value}`"
          class="tab"
          :class="{ active: opt.value == weatherStore.dataSource }"
          role="tab"
          :aria-selected="opt.value == weatherStore.dataSource"
          @click.stop.prevent="onOptionClick(opt)"
          @mousedown.stop
          @dblclick.stop.prevent
          @touchstart.stop
          @touchend.stop
      >
        {{ opt.label }}
      </span>
    </div>
  </div>
</template>

<style scoped lang="less">
.ds-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  user-select: none;
  position: relative;
  z-index: 10;
  pointer-events: auto;

  &__title {
    font-size: 12px;
    opacity: 0.86;
    white-space: nowrap;
  }

  &__select {
    min-width: 140px;
  }

  &__native {
    min-width: 140px;
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    padding: 4px 8px;
    outline: none;
  }
}


</style>

<style scoped lang="less">
/* —— 自定义数据源 tabs —— */
.source-tab {
  border-radius: 16px;
  border: 2px solid transparent;
  background: rgba(26, 26, 26, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  pointer-events: auto;

  .tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    padding: 6px 12px;
    border-radius: 16px;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    border: 1px solid transparent;
    cursor: pointer;
    user-select: none;
    opacity: 0.85;
    transition: all .15s ease;
    pointer-events: auto;

    &:hover {
      opacity: 1;
      background-color: rgba(23, 49, 255, 0.7);
    }

    &.active {
      opacity: 1;
      background-color: rgba(23, 49, 255, 0.7);
    }
  }
}

.ds-switch.is-disabled, .ds-switch[aria-disabled='true'] {
  opacity: 0.6;
  pointer-events: none;
}
</style>
